/**
 * 功能描述: ywBaseTable样式
 * @author 赵常畅
 * @date 2022/9/23 10:47
 * @version 1.0
 */
@import "../../style/index";
@import "tableConstant";

/* 基础table */
@mixin table--layout {
//  布局
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: $--table-line-height;
  position: relative;
  /* 紧凑型 middle 表格 */
  &.#{$namespace}-table-middle {
    // 主体的表格容器的子元素的表格
    .#{$namespace}-table-tbody {
      .#{$namespace}-table-wrapper {
        &:only-child {
          .#{$namespace}-table {
            margin: -12px -8px -12px 25px;
          }
        }
      }
    }
  }
  /*
 紧凑型 small 表格
 */
  &.#{$namespace}-table-small {
    // 主体的表格容器的子元素中的表格
    .#{$namespace}-table-tbody {
      .#{$namespace}-table-wrapper {
        &:only-child {
          .#{$namespace}-table {
            margin: -8px -8px -8px 25px;
          }
        }
      }
    }
  }
  // 原生表格
  table {
    width: 100%;
  }
  // 表格容器
  @include b(table-container) {
    // 伪类 内部前面
    &::before {
      left: 0;
    }
    // 伪类 内部后面
    &::after {
      right: 0;
    }
  }
}
@include b(table) {
  // 样式
  color: $--table-font-color;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  font-size: $--table-font-size;
  background: $--table-background-color;
  border-radius: $--table-border-radius;
  /*
   紧凑型 middle table
   */
  &.#{$namespace}-table-middle {
    font-size: $--table-middle-font-size;
  }
  /*
   紧凑型 small table
   */
  &.#{$namespace}-table-small {
    font-size: $--table-small-font-size;
  }
  /*
   带边框的表格
   */
  &.#{$namespace}-table-bordered {
    // 标题
    & > .#{$namespace}-table-title {
      border: $--table-border;
      border-bottom: 0;
    }
    // 容器
    & > .#{$namespace}-table-container {
      border-left: $--table-border;
    }
    // 底部
    & > .#{$namespace}-table-footer {
      border: $--table-border;
      border-top: 0;
    }
  }
  // 原生表格
  table {
    text-align: left;
    border-radius: $--table-border-radius $--table-border-radius 0 0;
    border-collapse: separate;
    border-spacing: 0;
  }
  // 主体容器
  @include b(table-container) {
    // 伪类样式 内部前面
    &::before {
      left: 0;
    }
    // 伪类 内部后面
    &::after {
      right: 0;
    }
  }
  // 引入布局
  @include table--layout;
}

/* 紧凑型 middle table 的 标题、底部、所有的th和td
 */
.#{$namespace}-table.#{$namespace}-table-middle .#{$namespace}-table-title,
.#{$namespace}-table.#{$namespace}-table-middle .#{$namespace}-table-footer,
.#{$namespace}-table.#{$namespace}-table-middle .#{$namespace}-table-thead > tr > th,
.#{$namespace}-table.#{$namespace}-table-middle .#{$namespace}-table-tbody > tr > td,
.#{$namespace}-table.#{$namespace}-table-middle tfoot > tr > th,
.#{$namespace}-table.#{$namespace}-table-middle tfoot > tr > td {
  padding: 12px 8px;
}

/* 紧凑型 small table 的 标题、底部、所有的th和td
 */
.#{$namespace}-table.#{$namespace}-table-small .#{$namespace}-table-title,
.#{$namespace}-table.#{$namespace}-table-small .#{$namespace}-table-footer,
.#{$namespace}-table.#{$namespace}-table-small .#{$namespace}-table-thead > tr > th,
.#{$namespace}-table.#{$namespace}-table-small .#{$namespace}-table-tbody > tr > td,
.#{$namespace}-table.#{$namespace}-table-small tfoot > tr > th,
.#{$namespace}-table.#{$namespace}-table-small tfoot > tr > td {
  padding: 8px 8px;
}

/* 紧凑型 small 表格
 */
@mixin table-small--layout {
  // 布局
  @include b(table-selection-column) {
    width: 46px;
    min-width: 46px;
  }
}
@include b(table-small) {
  // 样式
  // 表格头部的tr的td的th
  @include b(table-thead) {
    & > tr {
      & > th {
        background-color: $--table-small-thead-background-color;
      }
    }
  }
// 引入布局
  @include table-small--layout;
}

/* 带边框的表格
    内部表格行、列、单元格边框
 */
//主体容器中的所有th、td
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-content > table > thead > tr > th,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-header > table > thead > tr > th,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-body > table > thead > tr > th,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-content > table > tbody > tr > td,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-header > table > tbody > tr > td,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-body > table > tbody > tr > td,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-content > table > tfoot > tr > th,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-header > table > tfoot > tr > th,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-body > table > tfoot > tr > th,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-content > table > tfoot > tr > td,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-header > table > tfoot > tr > td,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-body > table > tfoot > tr > td {
  border-right: $--table-border;
}
// 非第一个子元素的th
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-content > table > thead > tr:not(:last-child) > th,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-header > table > thead > tr:not(:last-child) > th,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-body > table > thead > tr:not(:last-child) > th {
  border-bottom: $--table-border;
}
// 头部的tr th
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-content > table > thead > tr > th::before,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-header > table > thead > tr > th::before,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-body > table > thead > tr > th::before {
  background-color: transparent !important;
}
// 带边框表格中的原生table
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-content > table,
.#{$namespace}-table.#{$namespace}-table-bordered > .#{$namespace}-table-container > .#{$namespace}-table-header > table {
  border-top: $--table-border;
}
// 单元格内的表格内容
@include b(table-cell) {
  @include b(table-container) {
    &:first-child {
      border-top: 0;
    }
  }
}

/* 可伸缩列（鼠标拖拽表头分割线改变列宽）
 */
@mixin table-resize-handle--layout {
//  布局
  position: absolute;
  top: 0;
  height: 100% !important;
  bottom: 0;
  left: auto !important;
  right: -8px;
  width: 16px;
  // 拖拽 伪类样式 内部前面
  &.dragging {
    &:before {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 200vw;
    }
  }
}
@include b(table-resize-handle) {
  // 样式
  cursor: col-resize;
  touch-action: none;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
  z-index: 1;
  // 鼠标悬浮
  &:hover {
    // 可伸缩列的 分割线
    @include b(table-resize-handle-line) {
      opacity: 1;
    }
  }
  // 拖拽
  &.dragging {
    overflow: hidden;
    // 可伸缩列的 分割线
    @include b(table-resize-handle-line) {
      opacity: 1;
    }
    // 伪类样式 内部前面
    &:before {
      content: ' ';
      transform: $--table-resize-handle-transform;
      opacity: 0;
    }
  }
  // 引入布局
  @include table-resize-handle--layout;
}
// 可拖拽分割线样式
@mixin table-resize-handle-line--layout {
  // 布局
  display: block;
  width: 1px;
  margin-left: 7px;
  height: 100% !important;
}
@include b(table-resize-handle-line) {
  // 样式
  background-color: $--table-resize-handle-line-background-color;
  opacity: 0;
  // 引入布局
  @include table-resize-handle-line--layout;
}

/* 表格最外层容器
 */
@mixin table-wrapper--layout {
  // 布局
  clear: both;
  max-width: 100%;
  // 伪类样式 内部前面
  &::before {
    display: table;
  }
  // 伪类样式 内部后面
  &::after {
    display: table;
    clear: both;
  }
}
@include b(table-wrapper) {
  // 样式
  // 伪类样式 内部前面
  &::before {
    content: '';
  }
  // 伪类样式 内部后面
  &::after {
    content: '';
  }
  // 引入布局
  @include table-wrapper--layout;
}
// 所有的th td
.#{$namespace}-table-thead > tr > th,
.#{$namespace}-table-tbody > tr > td,
.#{$namespace}-table tfoot > tr > th,
.#{$namespace}-table tfoot > tr > td {
  position: relative;
  padding: 16px 16px;
  overflow-wrap: break-word;
}

/* 表格标题
 */
@mixin table-title--layout {
//  布局
  padding: 16px 16px;
}
@include b(table-title) {
  // 样式
  border-radius: $--table-border-radius $--table-border-radius 0 0;
  // 表格主体容器
  & + .#{$namespace}-table-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    // 原生table 子表头的tr的第一个子元素的th
    table {
      & > thead {
        & > tr {
          &:first-child {
            th {
              // 第一个子元素
              &:first-child {
                border-radius: 0;
              }
              // 最后一个子元素
              &:last-child {
                border-radius: 0;
              }
            }
          }
        }
      }
    }
  }
  // 引入布局
  @include table-title--layout;
}

/* 表格底部
 */
@mixin table-footer--layout {
//  布局
  padding: 16px 16px;
}
@include b(table-footer) {
  // 样式
  color: $--table-footer-font-color;
  background: $--table-footer-background-color;
  border-radius: 0 0 $--table-border-radius $--table-border-radius;
  // 引入布局
  @include table-footer--layout;
}

/* 表格头
 */
@mixin table-thead--layout {
//  布局
//  子tr的子th
  & > tr {
    & > th {
      position: relative;
      // 非最后一个子元素、非合并单元格 伪类 内部前面 样式
      &:not(:last-child):not(.#{$namespace}-table-selection-column):not(.#{$namespace}-table-row-expand-icon-cell):not([colspan])::before {
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 1.6em;
      }
    }
  }
}
@include b(table-thead) {
  // 样式
  // 子tr的子th
  & > tr {
    & > th {
      color: $--table-thead-font-color;
      font-weight: $--table-thead-font-weight;
      text-align: left;
      background: $--table-thead-background-color;
      border-bottom: $--table-border;
      transition: $--table-thead-transition;
      // 非最后一个子元素、非合并单元格 伪类 内部前面 样式
      &:not(:last-child):not(.#{$namespace}-table-selection-column):not(.#{$namespace}-table-row-expand-icon-cell):not([colspan])::before {
        background-color: $--table-thead-before-background-color;
        transform: $--table-thead-before-transform;
        transition: $--table-thead-before-transition;
        content: '';
      }
    }
    // 合并单元格
    & > th[colspan]:not([colspan='1']) {
      text-align: center;
    }
    // 不是最后一个子元素的 合并单元格的子th
    &:not(:last-child) {
      & > th[colspan] {
        border-bottom: 0;
      }
    }
  }
  // 引入布局
  @include table-thead--layout;
}

/* 表格主体
 */
@include b(table-tbody) {
  // 子tr的子td
  & > tr {
    & > td {
      border-bottom: $--table-border;
      transition: $--table-tbody-before-transition;
    }
    // 被选中
    &.#{$namespace}-table-row-selected {
      // 相邻的兄弟td
      & > td {
        background: $--table-tbody-selected-background;
        border-color: $--table-tbody-selected-border-color;
      }
      // 鼠标悬浮 相邻的兄弟td
      &:hover {
        & > td {
          background: $--table-tbody-selected-hover-background;
        }
      }
    }
  }
}
// 表格主体 子元素 原生表格
.#{$namespace}-table-tbody > tr > td > .#{$namespace}-table-wrapper:only-child .#{$namespace}-table {
  margin: -16px -16px -16px 33px;
}
// 表格主体 最后一个tr的td
.#{$namespace}-table-tbody > tr > td > .#{$namespace}-table-wrapper:only-child .#{$namespace}-table-tbody > tr:last-child > td {
  border-bottom: 0;
}
// 表格主体 最后一个tr的第一个td和最后一个td
.#{$namespace}-table-tbody > tr > td > .#{$namespace}-table-wrapper:only-child .#{$namespace}-table-tbody > tr:last-child > td:first-child,
.#{$namespace}-table-tbody > tr > td > .#{$namespace}-table-wrapper:only-child .#{$namespace}-table-tbody > tr:last-child > td:last-child {
  border-radius: 0;
}
// 鼠标悬浮
.#{$namespace}-table-tbody > tr.#{$namespace}-table-row:hover > td,
.#{$namespace}-table-tbody > tr > td.#{$namespace}-table-cell-row-hover {
  background: $--table-tbody-hover-background;
}
/* 表格行标题
 */
@include b(table-column-title) {
  position: relative;
  z-index: 1;
  flex: 1;
}
/* 可选择行表格
 */
@include b(table-selection-col) {
  width: 32px;
}
// 带边框表格 列
@include b(table-bordered) {
  @include b(table-selection-col) {
    width: 50px;
  }
}
// 可选择表格行中的 列样式
table tr th.#{$namespace}-table-selection-column,
table tr td.#{$namespace}-table-selection-column {
  padding-right: 8px;
  padding-left: 8px;
  text-align: center;
}
// 可选择表格 选择框
table tr th.#{$namespace}-table-selection-column .#{$namespace}-radio-wrapper,
table tr td.#{$namespace}-table-selection-column .#{$namespace}-radio-wrapper {
  margin-right: 0;
}
// 原生表格内th
table {
  tr {
    th {
      // 可选择表格行 伪类 内部前面
      &.#{$namespace}-table-selection-column {
        &::after {
          background-color: transparent !important;
        }
      }
    }
  }
}

/* 可选择行表格
 */
@include b(table-selection) {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

/* table container 表格内容容器
 */
// table container 伪元素
@mixin table-container-pseudo--layout {
  // 布局
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
}
// 表格内容容器 伪元素
.#{$namespace}-table .#{$namespace}-table-container::before,
.#{$namespace}-table .#{$namespace}-table-container::after {
  // 样式
  z-index: 1;
  transition: $--table-box-shadow-transition;
  content: '';
  pointer-events: none;
  // 引入布局
  @include table-container-pseudo--layout;
}
// 表格内容容器
@include b(table-container) {
  border-top-left-radius: $--table-border-radius;
  border-top-right-radius: $--table-border-radius;
  // 原生表格内tr 第一个子元素的th
  table {
    & > thead {
      & > tr {
        &:first-child {
          th {
            // 第一个子元素
            &:first-child {
              border-top-left-radius: $--table-border-radius;
            }
            // 最后一个子元素
            &:last-child {
              border-top-right-radius: $--table-border-radius;
            }
          }
        }
      }
    }
  }
}